<html lang="zh-CN">
<head>
    <meta charSet="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言墙</title>
    <link rel="icon" href="https://file.zhenghe.cn/group1/M00/A5/CB/wKge52Ze8qmADdSdAAaFL5YvofU867.ico"
          type="image/x-icon">
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(to right, #9db5cc, #138db7);
            color: #333;
            margin: 0;
            padding: 0;
        }

        section {
            margin: 40px 0;
            padding: 20px;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.9);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        section:hover {
            transform: translateY(-10px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        }

        h1,
        h2 {
            border-bottom: 2px solid #7aa6d2;
            padding-bottom: 10px;
            margin-bottom: 20px;
            font-weight: normal;
        }

        ul {
            list-style-type: none;
            padding: 0;
        }

        li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: rgba(30, 144, 255, 0.1);
            margin: 10px 0;
            padding: 20px;
            border-left: 5px solid #175898;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
            transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
        }

        li:hover {
            background-color: rgba(30, 144, 255, 0.2);
            transform: scale(1.02);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        }

        li span {
            flex: 1;
        }

        button {
            margin-left: 10px;
            padding: 5px 10px;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            color: white;
            transition: background-color 0.3s, transform 0.3s;
        }

        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        #login { /* 为登录部分整体设置样式 */
            display: flex;
            flex-direction: column;
            align-items: center; /* 水平居中 */
            justify-content: center; /* 垂直居中 */
            width: 30%; /* 缩小白色背景区域的宽度 */
            background-color: rgba(255, 255, 255, 0.5);
            padding: 10px;
            margin: 0 auto; /* 使登录部分在页面水平居中 */
        }

        input[type="text"],
        input[type="password"] {
            width: 100%; /* 输入框宽度占满白色背景区域 */
            padding: 10px;
            border: 2px solid #1e90ff;
            border-radius: 5px;
            font-size: 16px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        /* 新增样式 */
        .login-button {
            background-color: #2d95bb;
            width: 100px; /* 调整宽度以放大按钮 ，您可以根据需要修改数值 */
            height: 30px; /* 调整高度以放大按钮 ，您可以根据需要修改数值 */
            margin: 0 auto; /* 实现水平居中 */
        }

        .register-button {
            background-color: #4CAF50;
            width: 100px; /* 调整宽度以放大按钮 ，您可以根据需要修改数值 */
            height: 30px; /* 调整高度以放大按钮 ，您可以根据需要修改数值 */
            margin: 0 auto; /* 实现水平居中 */
        }

    </style>
</head>
<body>
<div style="height: 30%"></div>
<div className="container">
    <section id="login">
        <h2>登录</h2>
        <div className="input-container">
            <input type="text" id="loginUsername" placeholder="用户名">
            <br>
            <br>
            <input type="password" id="loginPassword" placeholder="密码">
            <br>
            <br>
            <button type="submit" class="login-button" onclick="login()">登录</button>
            <button class="register-button" onclick="gotoRegister()">去注册</button>
            <br>
            <br>
        </div>
    </section>
    <script>
        function gotoRegister() {
            // 这里可以添加跳转到注册页面的逻辑
            window.location.href = './register';
        }

        function returnToHome() {
            window.location.href = './index';
        }

        function returnToAdminHome() {
            window.location.href = './admin';
        }

        async function login() {
            const username = document.getElementById('loginUsername').value;
            const password = document.getElementById('loginPassword').value;

            const response = await fetch('./login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({username, password})
            });

            if (response.ok) {
                const data = await response.json();
                if (data.code === 0) {
                    // 将 token 存储到浏览器本地存储（LocalStorage）
                    localStorage.clear("token");
                    localStorage.clear("username");
                    localStorage.setItem("username", data.username)
                    localStorage.setItem("token", data.token)
                    console.log(response);
                    console.log('登录成功');
                    returnToHome();
                } else if (data.code === -1) {
                    // 将 token 存储到浏览器本地存储（LocalStorage）
                    localStorage.clear("token");
                    localStorage.clear("username");
                    localStorage.setItem("username", data.username)
                    localStorage.setItem("token", data.token)
                    // 处理登录失败的情况
                    console.log('登录成功，管理员');
                    alert(data.message)
                    returnToAdminHome();
                } else {
                    // 处理登录失败的情况
                    console.error('登录失败');
                    alert(data.message)
                }
            } else {
                // 处理登录失败的情况
                console.error('登录失败');
                alert("登录失败")
            }
        }
    </script>
</div>
</body>
</html>
